import { Drawer } from "antd";
import { changeDrawerState } from "@/store/modules/themeStore";
import { useAppDispatch, useAppSelector } from "@/store/hook.ts";
import { propsType } from "./type";
import CpuItem from "./components/cpuItem";
import MemoryItem from "./components/MemoryItem";
import HhdItem from "./components/hddItem";
import SsdItem from "./components/ssdItem";
import GpuItem from "./components/gpuItem";
import CenterItem from "./components/centerItem";
import VideoItem from "./components/videoItem";
function AddContent({ type }: propsType) {
  const dispatch = useAppDispatch();

  const drawerState = useAppSelector((state) => state.theme.drawerState);

  const assInfo = useAppSelector((state) => state.ass.assInfo);

  //弹窗的状态控制
  const onClose = () => {
    dispatch(changeDrawerState(false));
  };

  return (
    <>
      <Drawer
        title={type}
        placement="right"
        onClose={onClose}
        open={drawerState}
        closable={false}
        size="large"
      >
        {type === "CPU" && <CpuItem assInfo={assInfo} />}
        {type === "Memory" && <MemoryItem assInfo={assInfo} />}
        {type === "HDD" && <HhdItem assInfo={assInfo} />}
        {type === "SSD" && <SsdItem assInfo={assInfo} />}
        {type === "GPU" && <GpuItem assInfo={assInfo} />}
        {type === "Center" && <CenterItem assInfo={assInfo} />}
        {type === "Video" && <VideoItem></VideoItem>}
      </Drawer>
    </>
  );
}

export default AddContent;
